<template>
<div>

  <div class="relative cbox mx-auto p-4 lg:p-8 bg-white/20 ">

    <div class="absolute right-1 top-1 lg:right-2 lg:top-2">
      <v-icon class="!text-gray-600" :icon="isEdit?'mdi-close':'mdi-cog'" @click="isEdit=!isEdit" />
    </div>

    <div class="mt-4 grid lg:grid-cols-5 md:grid-cols-4 grid-cols-2 gap-4 lg:gap-8">
      
      <div class="relative group" v-for="(mainLink, i) in mainLinksStore.links">

        <!-- 列表: 编辑 -->
        <div v-if="isEdit" class="text-sm">
          <div class="lg:py-10 md:py-8 py-6 border bg-white flex justify-center items-center rounded">
            <p class="h-8 flex justify-center items-center">
              {{ mainLink.text }}
            </p>
          </div>
          <p class="mt-1 flex justify-center items-center gap-2 h-5 opacity-50">
            <v-icon @click="edit_link(i)" class="" icon="mdi-pencil"></v-icon>
            <v-icon @click="del_link_show(i)" class="" icon="mdi-trash-can"></v-icon>
          </p>
        </div>

        <!-- 列表: 链接 -->
        <a v-else :href="mainLink.href" target="_blank" class="block text-sm hover:scale-[1.05] transition-transform">
          <div class="lg:py-10 md:py-8 py-6 border bg-white flex justify-center items-center rounded group-hover:border-gray-400">
      
            <img v-if="!mainLink.icon" class="w-8 h-8" :src="mainLink.href +'/favicon.ico'" :alt="mainLink.text">

            <img v-else-if="mainLink.icon.startsWith('http') || mainLink.icon.endsWith('.ico')" class="w-8 h-8" :src="mainLink.icon" :alt="mainLink.text">

            <p v-else class="h-8 flex justify-center items-center">
              {{ mainLink.icon }}
            </p>

          </div>
          <p class="mt-1 text-center">
            {{ mainLink.text }}
          </p>
        </a>

      </div>
      

      <!-- 追加 -->
      <div class="group" v-show="isEdit && (mainLinksStore.links.length < mainLinksStore.maxCount)">
        <div class="lg:py-10 md:py-8 py-6  border bg-gray-200 flex justify-center items-center rounded-lg" @click="add_link">
          <v-icon icon="mdi-plus" />
        </div>
      </div>

    </div>

  </div>
  
  <v-dialog v-model="dialog" max-width="600">
    <v-card
      prepend-icon="mdi-account"
      title="User Profile"
    >
      <v-card-text>

          <v-text-field
            label="链接*"
            v-model="current_link_row.href"
            required
          ></v-text-field>

          <v-text-field
            label="名称*"
            v-model="current_link_row.text"
            maxlength="6"
            :rules="[value => !!value || '必填']"
            required
          ></v-text-field>

          <v-text-field
            label="图标url"
            placeholder="如 https://www.bilibili.com/favicon.ico"
            v-model="current_link_row.icon"
            maxlength="128"
          ></v-text-field>

      </v-card-text>

      <v-card-actions>
        <v-btn
          text="取消"
          variant="plain"
          @click="dialog = false"
        ></v-btn>
        <v-btn
          color="primary"
          text="确定"
          variant="tonal"
          @click="save_link"
        ></v-btn>
      </v-card-actions>

    </v-card>
  </v-dialog>

  <v-dialog
    v-model="confrimDialog"
    max-width="400"
  >
    <v-card
      prepend-icon="mdi-map-marker"
      title="删除链接?"
    >
      <v-card-text>
        <h2>名称：{{ mainLinksStore.getRow()['text'] }} </h2>
        <p>链接：{{ mainLinksStore.getRow()['href'] }}</p>
      </v-card-text>
      <template v-slot:actions>
        <v-btn @click="confrimDialog = false">
          否
        </v-btn>
        <v-btn @click="del_link_do(mainLinksStore.index)">
          是
        </v-btn>
      </template>
    </v-card>
  </v-dialog>
  
</div>
</template>


<script setup>
import {ref, reactive, computed, watch } from "vue";
import useMainLinksStore from "@/stores/mainLinks"
// const {links, index, maxCount, getRow, save, update, del} = useMainLinksStore();
const mainLinksStore = useMainLinksStore();

const linkRowInit = ()=>Object.assign({href:"", text:"", icon:"",});

// 是否在编辑
const isEdit=ref(false);


// 对话窗状态：开/关
const dialog = ref(false);
const confrimDialog = ref(false);

// 当前编辑链接
const current_link_row = ref(linkRowInit());



// 显示编辑对话框
function add_link(){

  if(mainLinksStore.links.length >= mainLinksStore.maxCount) {
    alert('max');
    return;
  }

  mainLinksStore.indexOperate.reset(); //清除index
  // mainLinksStore.index = -1; //清除index
  current_link_row.value = linkRowInit();
  dialog.value = true;
}

// 显示编辑对话框
function edit_link(_index){
  mainLinksStore.indexOperate.set(_index);//取回idx
  current_link_row.value = mainLinksStore.getRow();
  dialog.value = true;
}


// 显示编辑对话框
function save_link(){
  // console.log(mainLinksStore.index);return;
  mainLinksStore.save(current_link_row.value);
  dialog.value = false;
}

// 删除链接
function del_link_show(_index){
  confrimDialog.value = true;//打开对话框
  mainLinksStore.indexOperate.set(_index);//取回idx
}

// 删除链接
function del_link_do(_index){

  if(_index!=mainLinksStore.index){
    console.error(`不一致的index:${_index} : ${mainLinksStore.index}`);
    return;
  }

  mainLinksStore.del();//实际删除
  confrimDialog.value = false;//关闭对话框
}



// 执行搜索
function search(){
  console.log( "搜索：", Math.random(), kwd.value );
}
</script>